<template>
  <div class="container">
    <div>{{receivedMsg}}</div>
    <div class="sendView">
      <input type="text" v-model="msgText">
      <div @click="send" class="sendClass">发送消息</div>
    </div>
  </div>
</template>

<script>
import {ws} from '@/config/config'
export default {
  components: {},
  props: {},
  data() {
    return {
      receivedMsg: 'Welcome to Your Vue.js App',
      msgText:'',
      wsHandler:null
    }
  },
  sockets: {
    //查看socket是否渲染成功
    connect() {
      console.log('链接成功')
    },
    //检测socket断开链接
    disconnect() {
      console.log('断开链接')
    }, 
    // 重新链接
    reconnect() {
      console.log('重新链接')
    },
    wsSendMsgAction(msg){
      this.socket.send(msg)
    },
  },
  watch: {},
  computed: {},
  methods: {
    send: function(){
      console.log(this.msgText)
      this.wsHandler.send(this.msgText)
    },
    connection: function(){
      let self=this
      self.wsHandler = new WebSocket(`${ws}/wsTest`)
      self.wsHandler.onopen = function() {
        console.log('open')
        self.wsHandler.send('test')
      }
      self.wsHandler.onmessage = function(e) {
        console.log('message', e.data)
        // self.wsHandler.close()
      }
      self.wsHandler.onerror = function() {
        console.log('onerror')
      }
      self.wsHandler.onclose = function() {
        console.log('close')
      }
    }
  },
  created() {
    this.connection()
  },
  mounted() {
  
  }
}
</script>
<style lang="scss" scoped>
.container{
  display:flex;
  flex-direction:column;
  .sendView{
    margin: 30px;
    display:flex;
   flex-direction:column;
   align-items: center;
     .sendClass{
         margin: 30px;
    width: 100px;
    height: 20px;
    border-radius:12%;
    background-color: #42b983;
    color: #fff;
  }
  }

}
</style>